<template>
  <view class="page user-info-page">
    <div class="wrap">
      <div class="nick-name">{{ userInfo.name }}</div>
      <div class="change-nickname">
        <div class="label">更改昵称 Change Name</div>
        <div class="value-box">
          <input
            v-model="nickName"
            confirm-type="done"
            @confirm="changeNickName"
            type="text"
            placeholder="请输入 Enter Name"
          />
        </div>
      </div>
      <div class="ul">
        <div class="li">
          <div class="btn" @click="toAddress">收件人信息 Recipient Information &#62;</div>
        </div>
        <div class="li">
          <div class="btn" @click="toInvoiceInfo">开票信息 Invoice Information &#62;</div>
        </div>
        <div class="li">
          <div class="btn" @click="toInvoice">我的发票 My Invoice &#62;</div>
        </div>
      </div>
    </div>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const userInfo = computed(() => store.state.user.userInfo)
onMounted(() => {
  console.log('用户信息', userInfo.value)
})
let nickName = ref<string>('')
import { upUserInfo } from '@/utils/api/user'
const changeNickName = async () => {
  console.log('changeNickName')
  const { code } = await upUserInfo({ name: nickName.value, id: userInfo.value.id })

  if (code === 200) {
    uni.showToast({
      title: '修改成功'
    })
  }
  setTimeout(() => {
    store.dispatch('user/getUserInfo')
  }, 500)
}

const toAddress = () => {
  uni.navigateTo({
    url: '/pages/address/address'
  })
}
const toInvoiceInfo = () => {
  uni.navigateTo({
    url: '/pages/invoiceInfo/invoiceInfo'
  })
}
const toInvoice = () => {
  uni.navigateTo({
    url: '/pages/myInvoice/myInvoice'
  })
}
</script>

<style lang="scss" scoped>
.user-info-page {
  font-size: 32rpx;
  line-height: 44rpx;
  color: #000;
  .ul {
    .li {
      margin-bottom: 20rpx;
    }
  }
}
.nick-name {
  margin-bottom: 64rpx;
}
.change-nickname {
  margin-bottom: 84rpx;
  .label {
    margin-bottom: 20rpx;
  }
  .value-box {
    border-bottom: 1px solid #858585;
    input {
      height: 44rpx;
      border: none;
      font-size: 32rpx;
    }
  }
}
</style>
